require('./PageZLfgsqEdit.less');
require('rc-steps/assets/index.css');
require('rc-steps/assets/iconfont.css');

import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import { Control } from 'react-keeper'
import EngSelect from './../engselect'
import moment from 'moment';
import Steps, { Step } from 'rc-steps';
import { Button,Page, Panel,PanelHeader, PanelBody, PanelFooter,ButtonArea, MediaBox,Cells,Checkbox,Select,
  Cell,CellHeader,MediaBoxTitle,MediaBoxHeader,MediaBoxDescription,MediaBoxBody,MediaBoxInfo,Popup,PopupHeader,
  MediaBoxInfoMeta,Input,CellsTips,Icon,Label,CellsTitle,Toptips,Toast,Dialog,FooterLink,Article,Grids,PullToRefresh,
  CellBody,CellFooter, Form,FormCell,Radio,Gallery,GalleryDelete,Uploader,TextArea,SearchBar,PreviewItem} from  'react-weui/build/packages'
import AMap from './../../../components/amap'
import inputtp from './../../../assets/icon/输入.png';

class ZLfgsqEdit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showToast: false,
      showLoading: false,
      toastTimer: null,
      loadingTimer: null,
      showAndroid2: false,
      showAndroid3: false,
    }

    this.addStep = this.addStep.bind(this);

    this.showLoading = this.showLoading.bind(this);
    this.hideDialog2 = this.hideDialog2.bind(this);
    this.hideDialog3 = this.hideDialog3.bind(this);

    this.addFiles = this.addFiles.bind(this);
    this.clickFiles = this.clickFiles.bind(this);

    this.showFiles = this.showFiles.bind(this);
    this.hideFiles = this.hideFiles.bind(this);
    this.delFiles = this.delFiles.bind(this);
    this.hideLoading = this.hideLoading.bind(this);

    this.goselecteng = this.goselecteng.bind(this);
    this.onEngFetch = this.onEngFetch.bind(this);
    this.setSelectEng = this.setSelectEng.bind(this);

    this.sgjdChange = this.sgjdChange.bind(this);
    this.tqqkChange = this.tqqkChange.bind(this);
    this.tqwdChange = this.tqwdChange.bind(this);
    this.jlrqChange = this.jlrqChange.bind(this);
    this.leftSelect = this.leftSelect.bind(this);
    this.rightSelect = this.rightSelect.bind(this);
    this.qkjlChange = this.qkjlChange.bind(this);
    this.qkjlBlur = this.qkjlBlur.bind(this);
    this.qkwtChange = this.qkwtChange.bind(this);
    this.qkwtBlur = this.qkwtBlur.bind(this);
    this.qklsChange = this.qklsChange.bind(this);
    this.qklsBlur = this.qklsBlur.bind(this);
    this.qkqtChange = this.qkqtChange.bind(this);
    this.qkqtBlur = this.qkqtBlur.bind(this);
    this.yjysRqChange = this.yjysRqChange.bind(this);
    this.yjysBlur = this.yjysBlur.bind(this);

    this.sqRqChange = this.sqRqChange.bind(this);
    this.sqBlur = this.sqBlur.bind(this);

    this.checkChange = this.checkChange.bind(this);

    this.saveInfo = this.saveInfo.bind(this);
    this.upInfo = this.upInfo.bind(this);
    this.goHome = this.goHome.bind(this);
    this.goList= this.goList.bind(this);
    this.childDoSoming= this.childDoSoming.bind(this);

  }

  childDoSoming(){
    this.props.onSomething(this.state.rzstore.currentEng.name);
  }

  addStep = () => {
    /*    const steps = [...this.state.steps];
        steps.push({
          title: '待运行',
          description: '新的节点',
        });
        this.setState({ steps });*/
  }

  hideLoading(){
    this.setState({showLoading: false})
  }

  goList() {
     Control.go('/myyewu/rizhijllist',this.state.rzstore.currentEng);
  }

  goHome() {
    Control.go('/myyewu/rizhilist');
  }

  hideDialog2() {
    this.setState({showAndroid2: false});
  }

  hideDialog3() {
    this.setState({showAndroid3: false});
  }

  jlrqChange(e){
    console.log('jlrqChange');
    Actions.jlrqChange(e.target.value);
  }

  yjysRqChange(e){
    console.log('jlrqChange');
    Actions.yjysRqChange(e.target.value);
  }

  yjysBlur(e){
    console.log('jlrqChange');
    Actions.yjysBlur(e.target.value);
  }

  sqBlur(e){
    Actions.sqBlur(e.target.value);
  }

  sqRqChange(e){
    console.log('jlrqChange');
    Actions.sqRqChange(e.target.value);
  }

  checkChange(e){
    Actions.checkInfo(e);
  }


  saveInfo(){
     //this.showLoading();
    this.setState({showAndroid2: false,showAndroid3: false});
    Actions.saveInfo();
  }

  upInfo(){
    this.setState({showAndroid2: false,showAndroid3: false});
    Actions.upInfo();
  }

  showLoading() {
    this.setState({showLoading: true});

    this.state.loadingTimer = setTimeout(()=> {
      this.setState({showLoading: false});
    }, 2000);
  }



  sgjdChange(e){
    Actions.sgjdChange(e.target.value);
  }

  tqqkChange(e){
    Actions.tqqkChange(e.target.value);
  }

  tqwdChange(e){
    Actions.tqwdChange(e.target.value);
  }

  leftSelect(e){
    this.setState({bottom_show: false})
  }

  rightSelect(e){
    this.setState({bottom_show: false})
    Actions.checkChange();

  }

  qkjlChange(e){
    Actions.qkjlChange(e.target.value);
  }

  qkjlBlur(e){
    Actions.qkjlChange(e.target.value);
  }

  qkwtChange(e){
    Actions.qkwtChange(e.target.value);
  }

  qkwtBlur(e){
    Actions.qkwtChange(e.target.value);
  }

  qklsChange(e){
    Actions.qklsChange(e.target.value);
  }

  qklsBlur(e){
    Actions.qklsChange(e.target.value);
  }

  qkqtChange(e){
    Actions.qkqtChange(e.target.value);
  }

  qkqtBlur(e){
    Actions.qkqtChange(e.target.value);
  }

  goselecteng() {
    Control.go('/myyewu/engselect');
  }

  setSelectEng(obj) {
    console.log('返回');
    console.info(obj);
    Actions.setCurrentEng(obj);
  }

  onEngFetch(obj, callback) {
    console.info('engfetch');
  }


  clickFiles(file,i) {
    Actions.clickFiles(file,i);
  }

  addFiles(file) {
    var that=this;
    var mtype=file.type;
    var mediaType=mtype.substr(0,mtype.indexOf("/"));
    var mediaSuffix=mtype.substr(mtype.indexOf("/")+1,mtype.length);
    var wcmv={};

    wcmv.medataBase64=file.data;
    wcmv.mediaType=mediaType;
    wcmv.mediaSuffix=mediaSuffix;
    wcmv.filename = file.name;
    Actions.addFiles(file,wcmv,that);
  }

  showFiles(file, index) {
    Actions.showFiles(index);
  }


  delFiles(e, index) {
    console.info(e);
    console.info(index);
    Actions.delFiles(index);
    this.hideFiles();
  }

  hideFiles() {
    Actions.hideFiles();
  }

  renderGallery(){

    if(!this.state.rzstore.gallery) return false;
    let srcs = this.state.rzstore.urls.map(file=>file.url)

    return (
      <Gallery
        src={srcs}
        show
        defaultIndex={this.state.rzstore.gallery.id}
        onClick={ e=> {
          e.preventDefault()
          e.stopPropagation();
        }}

      >
        <Button
          style={{display: 'inline-block',
            width: 'auto',
            color: 'white',
            border: 'none',
            position: 'absolute',
            top: '-55px',
            left: '15px'}}
          onClick={this.hideFiles}
          plain>
          返回
        </Button>
        <GalleryDelete           style={{display: 'inline-block',
          width: 'auto',
          color: 'white',
          border: 'none',
          position: 'absolute',
          top: '-65px',
          left: Math.floor(window.screen.width/2) }}
          onClick={(e, id)=> this.delFiles(e,id)} />
      </Gallery>
    )
  }

  render() {
    let t = this;


    return (
      <div className="page fgsqedit">
        <div>1</div>


          <div style={{
            height: window.screen.height-220,
            background: '#fff'
          }}>

            <PullToRefresh
              onRefresh={this.loadMore}
            >

              <div  style={{overflowY:'scroll',padding: '10px'}}>
                <Steps current={this.state.rzstore.currentStep}  style={{marginTop: '-3px' }}>
                  {this.state.rzstore.steps.map((step, i) => <Step key={i} {...step} />)}
                </Steps>
              </div>
          <Panel>
            <PanelHeader>
              <div className="title-bg"/>
              现场照片
            </PanelHeader>
            <PanelBody>
              <MediaBox type="small_appmsg">
                { this.renderGallery() }
                <Uploader
                  title=""
                  maxCount={6}
                  files={this.state.rzstore.urls}
                  onError={msg => alert(msg)}
                  disabled={this.state.rzstore.isUpload}
                  onChange={(file,e)=>this.addFiles(file)}
                  onFileClick={
                    (e, file, i) => {
                      console.log('file click', file, i)
                      this.clickFiles(file,i)
                    }
                  }
                  lang={{
                    maxError: maxCount => `最多能上传 ${maxCount} 张图片`
                  }}
                />
              </MediaBox>
            </PanelBody>

          </Panel>

            <Panel className="head-panel">
              <PanelHeader>
                <div className="title-bg"/>
                工程信息
              </PanelHeader>
              <PanelBody>
                <MediaBox type="appmsg">

                  <MediaBoxBody>
                    <MediaBoxTitle>
                      {this.state.rzstore.currentEng.engName}
                    </MediaBoxTitle>
                    <MediaBoxDescription>
                      <p style={{paddingTop:'5px'}}>{this.state.rzstore.currentEng.engJsdw}</p>
                      <p style={{paddingTop:'5px'}}>{ new Date(this.state.rzstore.jlmode.jlrq).toLocaleString() }</p>

                    </MediaBoxDescription>
                  </MediaBoxBody>
                  <CellFooter  style={{position: 'relative', marginRight: '10px'}}>
                    <img src={inputtp} alt="" style={{display: `block`, width: `20px`, marginRight: `5px`}}/>
                  </CellFooter>
                </MediaBox>
              </PanelBody>
            </Panel>



          <Panel>
            <PanelHeader>
              <div className="title-bg"/>
                参建单位
            </PanelHeader>
            <PanelBody>
              <MediaBox type="small_appmsg">
                <Cell>

                  <CellHeader>
                    <img src={inputtp}
                         style={{
                           width: '20px',
                           marginRight: '5px',
                           display: 'block'
                         }}/>
                  </CellHeader>
                  <CellBody>
                    建设单位: {this.state.rzstore.currentEng.engJsdw}
                    <p style={{paddingTop:'5px'}}>负责人：{this.state.rzstore.currentEng.engJsdwFzr}</p>
                    施工单位 {this.state.rzstore.currentEng.engSgdw}
                    <p style={{paddingTop:'5px'}}>负责人：{this.state.rzstore.currentEng.engSgdwFzr}</p>
                    监理单位 {this.state.rzstore.currentEng.engJldw}
                    <p style={{paddingTop:'5px'}}>负责人：{this.state.rzstore.currentEng.engJldwFzr}</p>
                  </CellBody>
                </Cell>
              </MediaBox>
            </PanelBody>




            <PanelHeader>
              <div className="title-bg"/>
              申请时间
            </PanelHeader>
            <PanelBody>
              <MediaBox type="small_appmsg">
                <Cell>
                  <CellHeader>
                    <img src={inputtp}
                         style={{
                           width: '20px',
                           marginRight: '5px',
                           display: 'block'
                         }}/>
                  </CellHeader>
                  <CellBody>
                    { new Date(this.state.rzstore.jlmode.jlrq).toLocaleString() }

                  </CellBody>
                </Cell>
              </MediaBox>
            </PanelBody>

            <AMap ref="amap" onSetPosition={this.setPosition} position={this.state.rzstore.position}></AMap>
            {/*<EngSelect ref="engselect" onSelectEng={this.setSelectEng} currentEng={this.state.rzstore.currentEng}></EngSelect>*/}
            <Toast icon="loading" show={this.state.showLoading}>保存中...</Toast>
            <Toptips type="warn" show={this.state.rzstore.showWarn} className="warn-div">
              <Icon value="warn"/>{this.state.rzstore.warnMessage}
            </Toptips>
          </Panel>

          </PullToRefresh>

          </div>

           <div style={{padding:'-20px'}}>
                  <ButtonArea direction="horizontal"  >
                    <Button type="warn"
                            onClick={ e=> this.setState({ showAndroid3: true}) }
                            disabled={this.state.rzstore.isUpload}
                            className= {this.state.rzstore.isNew ? 'edithide' : 'editshow' } > 提交</Button>
                    <Button type="primary" onClick={ e=> this.setState({ showAndroid2: true}) }
                            disabled={this.state.rzstore.isUpload}
                            className= {this.state.rzstore.isNew ? 'editshow' : 'editshow' } >保存</Button>
                  </ButtonArea>

                    <Dialog type="android" title={'操作'}  show={this.state.showAndroid2}
                            buttons={[
                              {
                                type: 'default',
                                label: '取消',
                                onClick: this.hideDialog2
                              },
                              {
                                type: 'primary',
                                label: '确定',
                                onClick: this.saveInfo
                              }
                            ]}
                    >
                      是否保存?
                    </Dialog>
                      <Dialog type="android" title={'操作'}  show={this.state.showAndroid3}
                              buttons={[
                                {
                                  type: 'default',
                                  label: '取消',
                                  onClick: this.hideDialog3
                                },
                                {
                                  type: 'primary',
                                  label: '确定',
                                  onClick: this.upInfo
                                }
                              ]}
                      >
                      是否提交?(提交成功后无法更改数据)
                    </Dialog>

           </div>

      </div>
    );
  }


  notice() {
  }


  componentWillMount() {
    if(Control.state){
      Actions.initMode();
      Actions.loadMode(Control.state);
    }

  }

  shouldComponentUpdate(nextProps = {}, nextState = {}) {
    const thisProps = this.props || {},
      thisState = this.state.jlmode || {};

    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key] || !is(thisProps[key], nextProps[key])) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key] || !is(thisState[key], nextState[key])) {
        return true;
      }
    }
    return false;
  }
}

ZLfgsqEdit.propTypes = {
  pmode: React.PropTypes.object.isRequired,
  peng: React.PropTypes.object.isRequired,
  imgls: React.PropTypes.object.isRequired,
  router: React.PropTypes.object.isRequired,
  location: React.PropTypes.object.isRequired,
  urlShow: React.PropTypes.object.isRequired,
}

ReactMixin.onClass(ZLfgsqEdit, Reflux.connect(Store, 'rzstore'));


export default ZLfgsqEdit ;
